<template>
	<view class="page-row">
		<view class="list-box" v-if="list.length !== 0">
			<view v-for="(item, index) in list" :key="item" @click="checkAddress(item)">
				<view class="infos">
					<view>
						<view class="name">{{getName(item.username)}}</view>
						<view class="data">
							<view>{{ item.username }}<text>{{item.telephone}}</text></view>
							<view>{{item.address}}</view>
						</view>
					</view>
					<image :src="require('@/userPackage/image/updat.png')"  @click.stop="updateAddress(item)"></image>
				</view>
				<view class="bots">
					<view>
						<view :class="{'actives': item.is_default == 2}" @click.stop="openDialog('default',item)"> 
							<image v-if="item.is_default == 2" :src="require('@/userPackage/image/dui.png')"></image>
						</view>
						<text>{{item.is_default == 2 ? '默认地址' : '设为默认地址'}}</text>
					</view>
					<image :src="require('@/userPackage/image/delGray.png')" @click.stop="openDialog('delete',item)"></image>
				</view>
			</view>
		</view>
		<view class="address-pad" v-else>
			<empty title="暂无收货地址，请添加地址"/>
		</view>
		<view class="btn-boxVer">
			<view hover-class="hover_class" @click="addRess">新增地址</view>
		</view>
		<centerPop ref="tipsPop" :content="tips[checkType].content" :title="tips[checkType].title" @save="saveData" />
	</view>
</template>

<script>
	import {
		addressList,
		addressDel,
		defaultAddressSet
	} from 'utils/api/user.js'
	export default {
		data() {
			return {
				list: [],
				checkType: 'delete',
				checkItem: {},
				isCheck: false,
				tips: {
					'delete': { title: '删除', content: '确认删除吗?' },
					'default': { title: '默认', content: '确认设置默认地址吗?' }
				},
			}
		},
		onLoad(data) {
			this.isCheck = data.type
		},
		onShow() {
			this.getList()
		},
		methods: {
			getName(name) {
				if(name) {
					return name.slice(0, 1)
				}
				return ''
			},
			// 选择地址
			checkAddress(item) {
				if(this.isCheck) {
					uni.$emit('addressData', item)
					uni.navigateBack({
						delta: 1
					})
				}
			},
			onPullDownRefresh:function(){
			  this.getList();
			},
			getList() {
				uni.showLoading({
					title: '加载中'
				})
				addressList().then((res) => {
					this.list = res.data
					uni.stopPullDownRefresh();
				}).finally(() => {
					uni.hideLoading()
				})
			},
			addRess(id) {
				uni.navigateTo({
					url: '/userPackage/pages/addressMan/setAddress'
				})
			},
			updateAddress(item) {
				uni.setStorageSync('addressDetail', JSON.stringify(item))
				uni.navigateTo({
					url: '/userPackage/pages/addressMan/setAddress?id=' + item.id
				})
			},
			// 打开提示
			openDialog(key, item) {
				if(key === 'default' && item.is_default == 2) return
				this.checkItem = item
				this.checkType = key
				this.$refs.tipsPop.open()
			},
			// 提示回调
			saveData() {
				const questData = {
					'delete': { api: addressDel },
					'default': { api: defaultAddressSet }
				}
				uni.showLoading({
					title: '保存中'
				})
				questData[this.checkType].api({ id: this.checkItem.id }).then((res) => {
					uni.hideLoading()
					uni.showToast({ title: '操作成功', icon: 'none'})
					setTimeout(() => {
						if(this.checkType === 'default') {
							this.list.forEach((it) => {
								it.is_default = 1
							})
							this.checkItem.is_default = 2
						} else {
							this.getList()
						}
					}, 500)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.address-pad {
	box-sizing: border-box;
	padding-top: 290upx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.page-row {
	width: 100%;
	min-height: 100vh;
	background-color: #F6F6F6;
	box-sizing: border-box;
	padding: 30upx 20upx 130upx 20upx;
	.list-box {
		>view {
			background-color: #fff;
			border-radius: 20upx;
			margin-bottom: 30upx;
			.bots {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-top: 1px solid #EEEEEE;
				box-sizing: border-box;
				padding: 19upx 44upx 24upx 27upx;
				>view {
					display: flex;
					align-items: center;
					>view {
						width: 30upx;
						height: 30upx;
						border: 1px solid #969696;
						border-radius: 50%;
						margin-right: 15upx;
					}
					.actives {
						background-color: #1B3893;
						border-color: #1B3893;
						display: flex;
						align-items: center;
						justify-content: center;
						>image {
							width: 35upx;
							height: 35upx;
						}
					}
					>text {
						font-size: 26upx;
						color: #111111;
					}
				}
				>image {
					width: 31upx;
					height: 31upx;
				}
			}
			.infos {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 41upx 44upx 41upx 27upx;
				>image {
					width: 30upx;
					height: 30upx;
				}
				>view {
					display: flex;
					align-items: center;
					box-sizing: border-box;
					padding-right: 30upx;
					.name {
						width: 90upx;
						height: 90upx;
						background-color: #1B3893;
						display: flex;
						border-radius: 50%;
						align-items: center;
						flex-shrink: 0;
						justify-content:center;
						color: #FFFFFF;
						font-size: 48upx;
						font-weight: bold;
						margin-right: 26upx;
					}
					.data {
						>view:nth-of-type(1) {
							display: flex;
							align-items: flex-end;
							font-size: 32upx;
							color: #000000;
							font-weight: bold;
							>text {
								font-size: 24upx;
								color: #969696;
								margin-left: 8upx;
							}
						}
						>view:nth-of-type(2) {
							font-size: 24upx;
							margin-top: 18upx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							color: #000000;
							line-height: 36upx;
						}
					}
				}
			}
		}
	}
}
</style>